<!doctype html>
<!DOCTYPE html>
<html>
	<head>
		<title>my second app</title>
		<style>
				body { margin: 0; }
				canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<body onload="init()">
			<script src="js/three.min.js"></script>
			<script>
				//声明一些全局变量
			var renderer, camera, scene, geometry, material, mesh;

			function initRenderer(argument) {
				renderer = new THREE.WebGLRenderer();
				renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
				document.body.appendChild(renderer.domElement); //添加到dom
			}

			//初始化场景
			function initScene() {
				scene = new THREE.Scene(); //实例化场景
			}

			//初始化相机
			function initCamera() {
				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机
				camera.position.set(0, 0, 15);
			}

			//创建模型
			function initMesh() {
				geometry = new THREE.BoxGeometry(2, 2, 2); //创建几何体
				material = new THREE.MeshNormalMaterial(); //创建材质

				mesh = new THREE.Mesh(geometry, material); //创建网格
				scene.add(mesh); //将网格添加到场景
			}

			//运行动画
			function animate() {
				requestAnimationFrame(animate); //循环调用函数

				mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
				mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度

				renderer.render(scene, camera); //渲染界面
			}

			//初始化函数，页面加载完成是调用
			function init() {
				initRenderer();
				initScene();
				initCamera();
				initMesh();
				animate();
			}
			</script>
		</body>
	</html>